<template>
  <div class="outpatientPayment-detail-container">
    <van-nav-bar
      class="app-nav-bar"
      title="明细详情"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-cell-group class="ven-cell-group-wrapper" inset>
      <van-cell class="ven-cell-wrapper">
        <div class="patient-info-wrapper">
          <span>{{patient.name}}</span><span>{{patient.sex==0?'男':'女'}}</span><span>{{patient.age}}</span>
        </div>

        <div class="prescription-wrapper">
          <van-row>
            <van-col span="17">{{prescription.params.depname}}（门诊）</van-col>
            <van-col span="7" class="prescription-price-wrapper">{{prescription.totalPrice}} 元</van-col>
          </van-row>
        </div>

        <div class="medicine-list-wrapper">
          <div v-for="item in prescriptionDetailList">
            <div class="medicine-name-wrapper">
              <van-col span="1" ><div class="medicine-name-left-border"></div></van-col>
              <van-col span="16" class="medicine-name">{{item.params.medName}}</van-col>
              <van-col span="7" class="medicine-price-wrapper">{{item.totalPrice}} 元</van-col>
            </div>
            <div class="medicine-info-wrapper">
              <van-row>
                <van-col span="4">规格：</van-col>
                <van-col offset="4" span="10">{{item.params.specifications}}</van-col>
              </van-row>
              <van-row>
                <van-col span="4">单价：</van-col>
                <van-col offset="4" span="10">{{item.params.singlePrice}}元</van-col>
              </van-row>
              <van-row>
                <van-col span="4">数量：</van-col>
                <van-col offset="4" span="10">{{item.amount}}</van-col>
              </van-row>
            </div>
          </div>

          <div class="pay-btn-wrapper" v-if="prescription.status==0">
            <van-button type="info" size="small" @click="handlePay">支付</van-button>
          </div>
          <div class="tip-wrapper" v-if="prescription.status == 1">
            请到{{prescription.drugstoreId}}号药房取药(若已取药，请忽略)
          </div>
          <div class="refresh-wrapper" v-if="prescription.status == 1">
            没有显示取药房？点击<a @click="$router.go(0)" style="text-decoration: underline">刷新</a>
          </div>
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import prescriptionApi from "@/api/prescription";
import patientApi from "@/api/patient"
import {Dialog} from "vant";
export default {
  name: "OutpatientPaymentDetailIndex",
  data(){
    return{
      active:0,
      prescription:{params:{}},
      patient:{},
      prescriptionDetailList:[]
    }
  },
  computed:{

  },
  created() {
    this.init()
  },
  methods:{
    async init(){
      this.prescription.id = this.$route.query.prescriptionId
      await this.getPrescription();
    },
    async getPrescription(){
      const{data:res} = await prescriptionApi.findById(this.prescription.id)
      this.prescription = res.data
      await this.getPrescriptionDetailList()
      await this.getPatient()
    },
    async getPrescriptionDetailList(){
      const{data:res} = await prescriptionApi.getPrescriptionDetail(this.prescription.id)
      this.prescriptionDetailList = res.data
    },
    async getPatient(){
      const{data:res} = await patientApi.findByCardNo(this.prescription.cardNo)
      this.patient = res.data
    },
    async handlePay(){
      Dialog.confirm({
        title: '支付确认',
        message: '您确定要支付吗',
      })
        .then(async () => {
          const {data: res} = await prescriptionApi.pay(this.prescription.id)
          if (res.data==true){
            return this.$notify({type:'success',message:'支付成功',onClose:()=>{
                this.$router.go(0)
              }})
          }else{
            return this.$notify({type:'danger',message:res.msg})
          }

        })
        .catch(() => {
          return
        });
    }
  }
}
</script>

<style lang="less" scoped>
.outpatientPayment-detail-container{
  .ven-cell-group-wrapper{
    margin-top: 10px;
    .ven-cell-wrapper{
      .patient-info-wrapper{
        font-size: 15px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px gray solid;
        span:after{
          content: "  ";
          white-space: pre;
        }
      }
      .prescription-wrapper{
        margin-bottom: 10px;
        font-size: 15px;
        .prescription-price-wrapper{
          text-align: right;
          color: red;
        }
      }
      .medicine-list-wrapper{
        font-size: 15px;
        .medicine-name-wrapper{
          .medicine-name-left-border{
            width: 2px;
            height: 20px;
            line-height: 20px;
            border-radius: 5px;
            background-color: dodgerblue;
          }
          .medicine-name{
            border-radius: 5px;
          }
          .medicine-price-wrapper{
            text-align: right;
          }
        }
        .medicine-info-wrapper{
          color: gray;
        }
        .pay-btn-wrapper{
          text-align: right;
        }
        .tip-wrapper{
          text-align: right;
          font-size: 15px;
          color: red;
        }
        .refresh-wrapper{
          text-align: right;
          font-size: 15px;
        }
      }
    }
  }
}
</style>
